<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>角色主页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<%@ include file="/WEB-INF/common.jsp"%>

<link
	href="${path }/resources/css/plugins/bootstrap-table/bootstrap-table.min.css"
	rel="stylesheet">
<link href="${path }/resources/css/animate.css" rel="stylesheet">
<link href="${path }/resources/css/style.css?v=4.1.0" rel="stylesheet">

<!--dataTables css样式-->
<link rel="stylesheet" type="text/css"
	href="${path }/resources/css/jquery.dataTables.min.css">
<!--DataTables button扩展-->
<link rel="stylesheet" type="text/css"
	href="${path }/resources/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css"
	href="${path }/resources/css/form.css">
</head>
<style type="text/css" rel="stylesheet">
#province {
	width: 150px;
	margin-left: 20px;
	display: inline-block;
}

#city {
	width: 150px;
	margin-left: 20px;
	display: inline-block;
}

#district {
	width: 150px;
	margin-left: 20px;
	display: inline-block;
}
</style>
<body class="gray-bg" style="">
<jsp:include page="/WEB-INF/loginCheck.jsp" />
	<div>
		<h1 style="margin-left: 20px">新建建筑物</h1>
	</div>
	<!--添加的表单  -->
	<div id="" barclass="panel-body" style="margin-top: 30px">
		<form id="defaultForm" action="${path }/building/editBuilding.htm?buildingId=-1&?id=${contractId}" method="post"
			data-parsley-validate class="form-horizontal form-label-left">
			<input type="hidden" name="buildingId" value="-1">   
            <input type="hidden" name="id" value="${contractId}">   
			<div class="form-group">
				<label class="control-label col-md-3 col-sm-3 col-xs-12"
					for="last-name">建筑名称：<span class="required">*</span>
				</label>
				<div class="col-md-6 col-sm-6 col-xs-12">
					<input value="" name="buildingName" 
						class="form-control col-md-7 col-xs-12">
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-md-3 col-sm-3 col-xs-12"
					for="first-name">建筑面积(平方米):<span class="required">*</span>
				</label>
				<div class="col-md-6 col-sm-6 col-xs-12">
					<input type="number" value="" name="buildingArea"
						class="form-control col-md-7 col-xs-12" id="buildingArea" readOnly>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-md-3 col-sm-3 col-xs-12"
					for="last-name">地上面积(平方米):<span class="required">*</span>
				</label>
				<div class="col-md-6 col-sm-6 col-xs-12">
					<input type="number" value="" name="overgroundArea" 
						class="form-control col-md-7 col-xs-12" id="overgroundArea" onkeyup="getBuildingArea()">
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-md-3 col-sm-3 col-xs-12"
					for="last-name">地下面积(平方米):<span class="required">*</span>
				</label>
				<div class="col-md-6 col-sm-6 col-xs-12">
					<input type="number" value="" name="undergroundArea" 
						class="form-control col-md-7 col-xs-12" id="undergroundArea"  onkeyup="getBuildingArea()">
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-md-3 col-sm-3 col-xs-12"
					for="last-name">地上层数:<span class="required">*</span>
				</label>
				<div class="col-md-6 col-sm-6 col-xs-12">
					<input type="number" value="" name="overgroundLayer" 
						class="form-control col-md-7 col-xs-12">
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-md-3 col-sm-3 col-xs-12"
					for="last-name">地下层数:<span class="required">*</span>
				</label>
				<div class="col-md-6 col-sm-6 col-xs-12">
					<input type="number" value="" name="undergroundLayer" 
						class="form-control col-md-7 col-xs-12">
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-md-3 col-sm-3 col-xs-12"
					for="last-name">建筑高度(米):<span class="required">*</span>
				</label>
				<div class="col-md-6 col-sm-6 col-xs-12">
					<input type="number" value="" name="buildingHeight" 
						class="form-control col-md-7 col-xs-12" >
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-md-3 col-sm-3 col-xs-12"
					for="last-name">围栏半径(米)：<span class="required">*</span>
				</label>
				<div class="col-md-6 col-sm-6 col-xs-12">
					<input type="number" value="" name="enclosureLength" 
						class="form-control col-md-7 col-xs-12" >
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-md-3 col-sm-3 col-xs-12"
					for="last-name">经纬度：<span class="required">*</span>
				</label>
				<div class="col-md-6 col-sm-6 col-xs-12">
					<input id="latitude" placeholder="复制成功后,请使用鼠标右键粘贴" name="latitude"
						class="form-control col-md-7 col-xs-12" type="text"> <a
						class=" btn default"
						href="http://api.map.baidu.com/lbsapi/getpoint/index.html"
						target="_blank">获取坐标</a>
				</div>
			</div>
			<div class="form-group">
				<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
					<button id="submit" type="submit" class="btn btn-success">提交</button>
					<a href="${path }/building/getAllBuilding.htm?id=${contractId}" class="btn btn-primary"
						style="margin-left: 500px;">返回</a>
				</div>
			</div>
		</form>

	</div>


	<!-- Peity-->
	<script src="${path }/resources/js/plugins/peity/jquery.peity.min.js"></script>

	<!-- Bootstrap table-->
	<script
		src="${path }/resources/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
	<script
		src="${path }/resources/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

	<!-- 自定义js-->
	<script src="${path }/resources/js/content.js?v=1.0.0"></script>

	<!-- jQuery Validation plugin javascript-->
	<script
		src="${path }/resources/js/plugins/validate/jquery.validate.min.js"></script>
	<script src="${path }/resources/js/plugins/validate/messages_zh.min.js"></script>

	<!-- jQuery form  -->
	<script src="${path }/resources/js/jquery.form.min.js"></script>

	<!-- layer javascript -->
	<script src="${path }/resources/js/plugins/layer/layer.min.js"></script>
	<!-- 省市联动 -->
	<script src="${path }/resources/js/distpicker.data.js"></script>
	<script src="${path }/resources/js/distpicker.js"></script>
	<script src="${path }/resources/js/main.js"></script>
    <!-- 表单验证 -->
    <script src="${path }/resources/js/jquery.min.js"></script>
    <script src="${path }/resources/js/jquery.validate.min.js"></script>

 <script>
 //根据地上面积和地下面积，自动计算建筑面积
	  function getBuildingArea(){
		  $('#buildingArea').val(parseInt($('#overgroundArea').val()) + parseInt($('#undergroundArea').val())) ;
	  }
 </script>
  
	<script type="text/javascript">
	$("#defaultForm").validate({
		onsubmit:true,// 是否在提交是验证
		onfocusout:false,// 是否在获取焦点时验证
		onkeyupd :false,// 是否在敲击键盘时验证
		
		rules:{
			buildingName:{
				required:true
			},
			buildingArea:{
				required:true
			},
			overgroundArea:{
				required:true,
			},
			undergroundArea:{
				required:true,
			},
			overgroundLayer:{
				required:true,
				digits:true
			},
			undergroundLayer:{
				required:true,
				digits:true//必须输入整数
			},
			buildingHeight:{
				required:true
			},
			enclosureLength:{
				required:true,
				digits:true//必须输入整数
			},
			latitude:{
				required:true
			},
		},
		messages:{
			buildingName:{
				required:"请输入建筑名称"
			},
			buildingArea:{
				required:"请输入建筑面积"
			},
			overgroundArea:{
				required:"请输入地上面积",
			},
			undergroundArea:{
				required:"请输入地下面积",
			},
			overgroundLayer:{
				required:"请输入地上层数",
				digits:"层数必须是整数"
			},
			undergroundLayer:{
				required:"请输入地下层数",
				digits:"层数必须是整数"
			},
			buildingHeight:{
				required:"请输入建筑高度"
			},
			enclosureLength:{
				required:"请输入围栏半径"
			},		
			latitude:{
				required:"请输入坐标"
			},
		},
		submitHandler:function(form){//通过之后回调
			alert("添加成功！");
			form.submit();
		}
		
	});
	</script>

</body>
</html>